<template>
  <div class="editInfo">
    <div class="leftBox">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span>基本资料</span>
        </div>
        <div class="avatarBox">
          <UploadImg  :multiple="false" :limitSize="1" :limitNumber="1"></UploadImg>
        </div>
        <div class="formBox">
          <el-form ref="basicInfoForm" label-position="right" label-width="80px" :model="basicInfo">
            <el-form-item label="用户昵称">
              <el-input v-model="basicInfo.nickName"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input v-model="basicInfo.phone"></el-input>
            </el-form-item>
            <el-form-item label="电子邮箱">
              <el-input v-model="basicInfo.email"></el-input>
            </el-form-item>
            <el-form-item label="用户角色">
              <el-tag>{{basicInfo.role}}</el-tag>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitBasicInfo" icon="el-icon-check" size="mini">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
    <div class="rightBox">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span>登陆信息</span>
        </div>
        <div class="formBox">
          <el-form ref="basicInfoForm" label-position="right" label-width="80px" :model="loginInfo">
            <el-form-item label="用户名">
              <el-input v-model="loginInfo.userName"></el-input>
            </el-form-item>
            <el-form-item label="修改密码">
              <el-input v-model="loginInfo.password" type="password" placeholder="请输入修改密码" id="password">
                <i slot="suffix" class="iconfont icon-yanjing1" @mouseover="hoverPassword('password',$event)" @mouseleave="hoverPassword('password',$event)"></i>
              </el-input>
            </el-form-item>
            <el-form-item label="确认密码">
              <el-input v-model="loginInfo.confirmPassword" type="password" placeholder="请确认修改密码" id="confirmPassword">
                <i slot="suffix" class="iconfont icon-yanjing1" @mouseover="hoverPassword('confirmPassword',$event)" @mouseleave="hoverPassword('confirmPassword',$event)"></i>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitLoginInfo" icon="el-icon-check" size="mini">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span>主题修改</span>
        </div>
        <div class="formBox">
          <el-form ref="basicInfoForm" label-position="right" label-width="80px" :model="theme">
            <el-form-item label="当前主题">
              <label for="">{{currencyTheme}}</label>
            </el-form-item>
            <el-form-item label="主题">
              <el-select v-model="theme.name" placeholder="请选择样式主题">
                <el-option v-for="(item,index) in themeList" :label="item" :value="item" :disabled="item === currencyTheme" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitLoginInfo" icon="el-icon-check" size="mini">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
  import UploadImg from '@/components/other/uploadImg';
  export default {
    name: 'editInfo',
    components: {
      UploadImg
    },
    data(){
      return {
        basicInfo: {
          avatar: 'http://bar-reserve1.oss-cn-hangzhou.aliyuncs.com/userAvatar/avatar.jpg',
          nickName: 'admin',
          phone: '15723446766',
          email: 'leigess@foxmail.com',
          role: '客服小二'
        },
        loginInfo: {
          userName: 'admin123456',
          password: '',
          confirmPassword: ''
        },
        theme: {
          name: ''
        },
        currencyTheme: 'primary',
        themeList: ["primary", "material", "terminal"]
      }
    },
    methods: {
      hoverPassword(passwordId, evt){  //鼠标经过显示密码
        let passwordDom = document.getElementById(passwordId);
        let type = passwordDom.getAttribute("type");
        if(type === "password"){
          passwordDom.setAttribute('type','text');
          evt.target.setAttribute('class','iconfont icon-yanjing');
        }else if(type === "text"){
          passwordDom.setAttribute('type','password');
          evt.target.setAttribute('class','iconfont icon-yanjing1');
        }
      },
      submitBasicInfo(){
        console.log('提交基本资料', this.basicInfo);
      },
      submitLoginInfo(){
        console.log('提交基本资料', this.loginInfo);
      }
    },
    created() {
    }
  }
</script>

<style lang="scss" scoped>
.editInfo{
  width: 100%;
  .box-card{
    margin-bottom: 20px;
  }
  .leftBox{
    vertical-align: top;
    padding-right: 10px;
    display: inline-block;
    width: 48%;
    .avatarBox{
      text-align: center;
    }
  }
  .rightBox{
    vertical-align: top;
    padding-left: 10px;
    display: inline-block;
    width: 48%;
  }
  .formBox{
    margin: 20px;
  }
}
</style>